<template>
    <div class="container">
        <el-card class="box-card" shadow="none" border="none">
            <div slot="header" class="clearfix">
                <span style="font-weight:bold">预约旅行</span>
            </div>

            <el-form label-position="right" label-width="80px" size="mini">
                <el-form-item label="旅行社 | " style="width:100%">
                    <el-radio-group v-model="filter_agency" size="mini">
                        <el-radio v-for="it in agencies" :key="it.name" :label="it.name">{{ it.name }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="日期 | " style="width:100%">
                    <el-date-picker v-model="filter_date" type="date" size="mini" value-format="yyyy-MM-dd"
                        format="yyyy年MM月dd日">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="价格 | " style="width:100%">
                    <el-radio-group v-model="filter_price.max" size="mini">
                        <el-radio v-for="it in prices" :key="it.id" :label="it.max === -1 ? it.min : it.max">{{
                            it.max === -1 ? '>1300' : '<' + it.max }}</el-radio>
                    </el-radio-group>
                    <el-input v-model="filter_price.min" placeholder="最低" style="width:70px;margin-left:20px;"
                        size="mini"></el-input> -
                    <el-input v-model="filter_price.max" placeholder="最高" style="width:70px" size="mini"></el-input>
                    <el-button icon="el-icon-search" type="primary" style="margin-left:5px"
                        @click="get_itinerary"></el-button>
                </el-form-item>
            </el-form>
            <el-divider></el-divider>
            <div class="enterprise_detail_content">


                <!-- 内容区域 -->
                <div class="itinerary_overview" v-for="it in itinerary_overview" :key="it.key">
                    <el-image class="image" fit="cover"
                        :src="'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'">

                    </el-image>
                    <div class="detail">
                        <h2>{{ it.starting_point }}-{{ it.destination }}</h2>
                        <span class="name">{{ it.t_name }} | {{ it.start_time }}</span>
                    </div>
                    <div class="price">
                        ￥{{ it.price }}
                    </div>
                    <div class="btn">
                        <el-button type="success" size="mini"
                            @click="() => $router.push({ path: '/user/itinerary_detail', query: { itinerary_id: it.id, title: '行程单详情' } })">查看详情</el-button><br>

                        <el-button type="primary" size="mini" @click="book_dialog_visible = true">预约行程</el-button>
                    </div>

                    <el-dialog title="注意" :visible.sync="book_dialog_visible" width="300px" style="z-index:20"
                        append-to-body center>
                        <span slot="title" style="color: #F56C6C;font-size:20px"><i class="el-icon-warning"></i> 注意</span>
                        确定要预约<br><span style="font-weight:bold;color:rgb(250,90,77)">{{ it.start_time }}</span>到<span
                            style="font-weight:bold;color:rgb(250,90,77)">{{
                                it.destination }}</span>的行程吗?
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="book_dialog_visible = false" size="medium">取 消</el-button>
                            <el-button type="primary" @click="book(it.id)" size="medium">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
                <el-empty v-if="this.itinerary_overview.length === 0" description="暂无数据"
                    style="position: absolute;left: 50%;transform: translate(-50%, 10%);"></el-empty>

                <el-divider v-if="this.itinerary_overview.length !== 0">没有啦，一滴都没有啦🥵</el-divider>
                <el-backtop target=".enterprise_detail_content">
                    <el-button type="primary" icon="el-icon-caret-top" circle></el-button></el-backtop>

            </div>

        </el-card>
    </div>
</template>

<script>

import Map from "@/components/reusable_components/map.vue";
import SvgIcon from '@/components/reusable_components/SvgIcon.vue';
export default {
    components: {
        Map,
        SvgIcon
    },

    data() {
        return {
            divider_visible: true,
            book_dialog_visible: false,
            book_item: null,
            itinerary_id: null,
            title: '',
            user: '',
            filter_agency: '',
            filter_date: '',
            filter_price: { min: 0, max: 1000000 },
            prices: [
                { id: 0, min: 0, max: 200 },
                { id: 1, min: 0, max: 600 },
                { id: 2, min: 0, max: 1000 },
                { id: 3, min: 0, max: 1200 },
                { id: 4, min: 1300, max: -1 },
            ],
            agencies: [],

            itinerary_overview: [],
        }
    },

    mounted() {
        this.itinerary_id = this.$route.query.id // 取得id
        this.title = this.$route.query.title
        this.user = this.$route.query.user
        this.get_all_agency()
        this.get_itinerary()
    },

    methods: {
        // 返回上一页
        goBack() {
            this.$router.back()
        },

        async get_all_agency() {
            // // console.log(this.itinerary_id)
            try {
                const res = await this.$http.get("/findAllAgency")
                // 处理数据
                this.agencies = res.data.data
            } catch (error) { }
        },

        async get_itinerary() {
            try {
                const res = await this.$http.post("/itinerary/getall", {
                    i_name: this.filter_agency,
                    time: this.filter_date,
                    price_up: this.filter_price.max,
                    price_down: this.filter_price.min,
                    pageNum: 1,
                    pageSize: 200,
                })//这里使用和更多页面一样的接口
                // console.log(res)
                let index = res.data.data.information.findIndex(item => item.id === 0 || item.id === '0');
                res.data.data.information.splice(index, 1)
                this.itinerary_overview = res.data.data.information

            } catch (error) { }
        },

        async book(id) {
            // console.log(id)
            try {
                const res = await this.$http.post("/itinerary/reserve", {
                    t_id: id,
                    u_id: sessionStorage.user_id
                })//这里使用和更多页面一样的接口

                if (res.data.data === 1) {
                    this.$message.success('预约成功')
                    this.$router.go(0)
                } else if (res.data.data === 0) {
                    this.$message.error('预约失败')
                } else {
                    this.$message.error('出现问题啦')
                }
                this.book_dialog_visible = false
            } catch (error) {
                // // console.log(error);
            }
        },
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 61.8vw;
    min-width: 950px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);

    .enterprise_detail_content {
        height: 60vh;
        overflow: auto;


        display: flex;

        flex-wrap: wrap;

        -ms-overflow-style: none;
        // /* IE 10+ */

        scrollbar-width: none;
        /* Firefox */

        .itinerary_overview {
            width: 99.8%;
            height: 100px;
            border: 1px solid rgb(220, 223, 230);
            border-radius: 4px;
            margin-bottom: 10px;
            display: flex;

            .image {
                width: 150px;
                height: 100%;
            }

            .detail {
                width: 55%;
                border-right: 5px dashed rgb(220, 223, 230);

                h2 {
                    margin: 10px 0 10px 20px;
                    font-weight: 500;
                }

                .name {
                    color: #99a9bf;
                    font-size: 0.5em;
                    margin: 10px 0 10px 20px;
                }
            }

            .price {
                line-height: 100px;
                text-align: center;
                width: 15%;
                height: 100%;
                font-size: 30px;
                color: rgb(250, 90, 77);
                // border-right: 2px dashed rgb(220, 223, 230);
            }

            .btn {
                margin: 0;
                display: flex;
                justify-content: center;
                flex-direction: column;
            }
        }

        .itinerary_overview:hover {
            // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
            background-color: rgba(153, 169, 191, .15);
            cursor: pointer;
            transition: all 1s ease;
        }
    }

    .enterprise_detail_content::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .more {
        margin-top: 1vh;
    }

}
</style>